import React from "react";
import PropTypes from "prop-types";
import ProductCard from "component/ProductCard/index.jsx";

import { Col, Row, Spin } from "antd";

import { withRouter } from "react-router";
import "./index.scss";
import DefaultProdImg from "../../../images/prod_img_540x260.jpg"


class ProductionList extends React.Component {

  handle_product_card_click(prod_id) {
    const { history } = this.props;
    history.push(`/production_details?prod_id=${prod_id}`);
  }


  render() {
    const { classes, current_brand_id, current_cls_id, is_products_loading } = this.props;

    // avoid case : rendering when data streaming.
    // show default card while loading data;
    const not_set_data_yet = (current_cls_id === undefined || current_brand_id === undefined);
    if (not_set_data_yet && !is_products_loading) {
      return <div>Page Based on Global State, could not visited directly. Should Change to param Page.</div>
    }


    const class_ = classes.find(cls => cls.id === current_cls_id);
    // productions = [] while not get data yet.
    const { productions } = class_.brands.find(brand => brand.id === current_brand_id) || {productions:[]};

    const empty_cards = [];
    for (let idx = 0; idx < 12; idx++) {
      empty_cards.push({
        id: -idx,
        name: "商品加载中...",
        price: 0
      })
    }

    return (
      <div className="prod_list_container">
        <Spin size="large" spinning={is_products_loading}>
          <Row gutter={16}>
            {(is_products_loading ? empty_cards : productions).map(prod => (
              <Col key={prod.id} span={12} className="prod_list_card">
                <ProductCard
                  name={prod.name}
                  id={prod.id}
                  price={prod.price}
                  img_src={prod.img_src || DefaultProdImg}
                  onClick={this.handle_product_card_click.bind(this)}
                />
              </Col>))}
          </Row>
        </Spin>
      </div>
    )
  }
}

ProductionList.propTypes = {
  current_cls_id: PropTypes.number,
  current_brand_id: PropTypes.number,
  classes: PropTypes.arrayOf(PropTypes.object),    // Not structure meet.

  is_products_loading: PropTypes.bool
}

export default withRouter(ProductionList);